<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<meta content="telephone=no" name="format-detection" />
	<title>Document</title>
	<style>
		*{margin: 0;padding: 0;}
		ul,li {list-style:none;}

		/*ul>li{float: left}*/
		ul{width: 100%;height: 36px;overflow-y:auto;/*display: -webkit-flex;*/}
		#wp {width: 200px;height: 36px;overflow:auto;white-space: nowrap;}
		#wp>div {/*height: 100%;margin-top: 57px;*/width: 100px; display: inline-table;}
		.clear {clear: both;}
		.success {width: 280px;height: 55px;line-height: 55px;overflow: auto;white-space: nowrap;}
		.success>li {display: inline-table;width: 60px;background: red;color:#000;text-align:center;margin-left: 5px;}
	</style>
	<script src="lib/zepto.min.js"></script>
</head>
<body>
<div>
	
	<ul id="list" style="transform:translate3D(0px,0px,0px);transtion:none">
		<li class="test_slice_call">item1</li>
		<li class="test_slice_call">item2</li>
		<li class="test_slice_call">item3</li>
		<li class="test_slice_call">item4</li>
		<li>item5</li>
		<li>item6</li>
		<li>item7</li>
		<li>item8</li>
		<li>item9</li>
		<li>item10</li>
		<li>item11</li>
		<li>item12</li>
		<li>item13</li>
		<li>item14</li>
		<li>item15</li>
		<li>item16</li>
		<li>item17</li>
		<li>item18</li>
		<li>item19</li>
		<li>item20</li>
		<li>item21</li>
		<li>item22</li>
		<li>item23</li>
		<li>item24</li>
		<li>item25</li>
		<li>item26</li>
		<li>item27</li>
		<li>item28</li>
		<li>item29</li>
		<li>item30</li>
		<li>item31</li>
		<li>item32</li>
		<li>item33</li>
		<li>item34</li>
		<li>item35</li>
		<li>item36</li>
		<li>item37</li>
		<li>item38</li>
		<li>item39</li>
		<li>item40</li>
		<li>item41</li>
		<li>item42</li>
		<li>item43</li>
		<li>item44</li>
		<li>item45</li>
		<li>item46</li>
		<li>item47</li>
		<li>item48</li>
		<li>item49</li>
		<li>item50</li>
		<li>item51</li>
		<li>item52</li>
		<li>item53</li>
		<li>item54</li>
		<li>item55</li>
		<li>item56</li>
		<li>item57</li>
		<li>item58</li>
		<li>item59</li>
		<li>item60</li>
		<li>item61</li>
		<li>item62</li>
		<li>item63</li>
		<li>item64</li>
		<li>item65</li>
		<li>item66</li>
		<li>item67</li>
		<li>item68</li>
		<li>item69</li>
		<li>item70</li>
		<li>item71</li>
		<li>item72</li>
		<li>item73</li>
		<li>item74</li>
		<li>item75</li>
		<li>item76</li>
		<li>item77</li>
		<li>item78</li>
		<li>item79</li>
		<li>item80</li>
		<li>item81</li>
		<li>item82</li>
		<li>item83</li>
		<li>item84</li>
		<li>item85</li>
		<li>item86</li>
		<li>item87</li>
		<li>item88</li>
		<li>item89</li>
		<li>item90</li>
		<li>item91</li>
		<li>item92</li>
		<li>item93</li>
		<li>item94</li>
		<li>item95</li>
		<li>item96</li>
		<li>item97</li>
		<li>item98</li>
		<li>item99</li>
		<li>item100</li>
		<div class="clear"></div>
	</ul>
</div>

	<div id="wp">
		<div>ceshgi1</div>
		<div>ceshgi2</div>
		<div>ceshgi3</div>
		<div>ceshgi4</div>
		<div>ceshgi5</div>
		<div>ceshgi6</div>
		<div>ceshgi7</div>
		<div>ceshgi8</div>
		<div>ceshgi9</div>
		<div>ceshgi10</div>
		<div>ceshgi11</div>
		<div>ceshgi12</div>
		<div>ceshgi13</div>
		<div>ceshgi14</div>
		<div>ceshgi15</div>
		<div>ceshgi16</div>
		<div>ceshgi17</div>
		<div>ceshgi18</div>
		<div>ceshgi19</div>
		<div>ceshgi20</div>
		<div>ceshgi21</div>
		<div>ceshgi22</div>
		<div>ceshgi23</div>
		<div>ceshgi24</div>
		<div>ceshgi25</div>
		<div>ceshgi26</div>
		<div>ceshgi27</div>
		<div>ceshgi28</div>
		<div>ceshgi29</div>
		<div>ceshgi30</div>
		<div>ceshgi31</div>
		<div>ceshgi32</div>
		<div>ceshgi33</div>
		<div>ceshgi34</div>
		<div>ceshgi35</div>
		<div>ceshgi36</div>
		<div>ceshgi37</div>
		<div>ceshgi38</div>
		<div>ceshgi39</div>
		<div>ceshgi40</div>
		<div>ceshgi41</div>
		<div>ceshgi42</div>
		<div>ceshgi43</div>
		<div>ceshgi44</div>
		<div>ceshgi45</div>
		<div>ceshgi46</div>
		<div>ceshgi47</div>
		<div>ceshgi48</div>
		<div>ceshgi49</div>
		<div>ceshgi50</div>
		<div>ceshgi51</div>
		<div>ceshgi52</div>
		<div>ceshgi53</div>
		<div>ceshgi54</div>
		<div>ceshgi55</div>
		<div>ceshgi56</div>
		<div>ceshgi57</div>
		<div>ceshgi58</div>
		<div>ceshgi59</div>
		<div>ceshgi60</div>
		<div>ceshgi61</div>
		<div>ceshgi62</div>
		<div>ceshgi63</div>
		<div>ceshgi64</div>
		<div>ceshgi65</div>
		<div>ceshgi66</div>
		<div>ceshgi67</div>
		<div>ceshgi68</div>
		<div>ceshgi69</div>
		<div>ceshgi70</div>
		<div>ceshgi71</div>
		<div>ceshgi72</div>
		<div>ceshgi73</div>
		<div>ceshgi74</div>
		<div>ceshgi75</div>
		<div>ceshgi76</div>
		<div>ceshgi77</div>
		<div>ceshgi78</div>
		<div>ceshgi79</div>
		<div>ceshgi80</div>
		<div>ceshgi81</div>
		<div>ceshgi82</div>
		<div>ceshgi83</div>
		<div>ceshgi84</div>
		<div>ceshgi85</div>
		<div>ceshgi86</div>
		<div>ceshgi87</div>
		<div>ceshgi88</div>
		<div>ceshgi89</div>
		<div>ceshgi90</div>
		<div>ceshgi91</div>
		<div>ceshgi92</div>
		<div>ceshgi93</div>
		<div>ceshgi94</div>
		<div>ceshgi95</div>
		<div>ceshgi96</div>
		<div>ceshgi97</div>
		<div>ceshgi98</div>
		<div>ceshgi99</div>
		<div>ceshgi100</div>
	</div>

	<ul class="success">
		<li class="test_filter"><span>432</span></li>
		<li><span>234</span></li>
		<li><span>432</span></li>
		<li><span>432</span></li>
		<li><span>43</span></li>
		<li class="test_filter"><span>678</span></li>
		<li><span>765</span></li>
		<li><span>657</span></li>
		<li><span>765</span></li>
		<li><span>765</span></li>
		<li><span>76</span></li>
		<li><span>765</span></li>
		<li><span>8769</span></li>
		<li><span>9876</span></li>
		<li><span>649</span></li>
		<li><span>6478</span></li>
		<li><span>687</span></li>
		<li><span>4687</span></li>
		<li><span>4876</span></li>
		<li><span>468</span></li>
		<li><span>486</span></li>
		<li><span>84</span></li>
		<li><span>847</span></li>
		<li><span>4867456</span></li>
		<li><span>456</span></li>
		<li><span>456</span></li>
		<li><span>456</span></li>
		<li><span>456</span></li>
		<li><span>456</span></li>
		<li><span>456</span></li>
	</ul>
	<div id="test">测试currentStyle</div>
	<input type="button" value="点击测试" id="test-btn">
	
	<script>
	$(function() {
		var $lis  =  $('li');
		var test = $('#test').get(0);
		window.test = test;
		$('#test').on('tap',function() {// 测试data方法
			$(this).data('data-test',12);
			var testData = $(this).data('dataTest');
			window.testData = testData;
		});

		$('#test-btn').on('tap',function() {//测试empty方法
			var lis = $('li');
			lis.empty();
		});

		var arr = [1,2,3,4,5,6];
		var arr2 = $.map(arr,function(t,i) {
			if(t/3==2) {return t}
			// if(t%3==0) {return t}
			// return t;
		});
		var arr3 = $.map({"yao":1,"tai":2,"yang":3},function(item,index){
		    // if(item>1){return item*item;}
		    // return item;
		    return index;
		});
	
		var arr4 = $.map($lis,function(t,i) {
			return t;
		});
		// var x = $lis.filter(function(index){
		// 	// console.log(index);
		// 	// return index;
			
		// }) ;
		var xx = $lis.filter('.test_filter');

		["kong", "ms", "webkit"].forEach(function(i,t,x) {
			console.log('i: '+i);
			console.log('t: '+t);
			console.log('x: '+x);
			console.log('typeof x: '+typeof x);
			console.log('遍历每一项：'+x[t]);
		})
		window.xx = xx; 
		var torf = $.inArray('3',['a','b','c','2']);
		console.log(arr2);//测试$.map(可以是数组，对象，zepto对象集合)
		console.log(arr3);//测试$.map(可以是数组，对象，zepto对象集合)
		console.log(arr4);//测试$.map(可以是数组，对象，zepto对象集合,返回值是一个数组)
		console.log(xx);
		console.log(torf);	
		var lis02 = document.getElementsByClassName('test_slice_call');
		window.lis02 = lis02;
	})
	</script>
</body>
</html>